<template>
  <div class="task-management">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="page-title"><i class="el-icon-tickets"></i> 任务管理</span>
        <div class="header-actions">
          <el-button
            class="add-btn"
            type="primary"
            icon="el-icon-plus"
            @click="showAddDialog">
            <span class="btn-text">添加任务</span>
          </el-button>
        </div>
      </div>

      <!-- 搜索表单 -->
      <div class="search-form">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="任务状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option label="进行中" :value="1"></el-option>
              <el-option label="已完成" :value="2"></el-option>
              <el-option label="已暂停" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任务类型">
            <el-select v-model="searchForm.type" placeholder="请选择类型" clearable>
              <el-option label="App教程" :value="1"></el-option>
              <el-option label="系统培训" :value="2"></el-option>
              <el-option label="业务指导" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 数据表格 -->
      <configurable-table
        :columns="tableColumns"
        :data="tableData"
        :loading="loading"
        :show-pagination="true"
        :current-page.sync="pagination.current"
        :page-size.sync="pagination.size"
        :pagination-total="pagination.total"
        @page-change="loadData"
        border>
        <!-- 任务类型列 -->
        <template #type="{ row }">
          <el-tag :type="getTypeTag(row.type)">
            {{ getTypeText(row.type) }}
          </el-tag>
        </template>

        <!-- 任务状态列 -->
        <template #status="{ row }">
          <el-tag :type="getStatusTag(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>

        <!-- 优先级列 -->
        <template #priority="{ row }">
          <el-tag :type="getPriorityTag(row.priority)">
            {{ getPriorityText(row.priority) }}
          </el-tag>
        </template>

        <!-- 操作列 -->
        <template #actions="{ row }">
          <div class="action-buttons">
            <el-button size="mini" icon="el-icon-view" @click="handleView(row)">查看</el-button>
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
            <el-button v-if="row.type == 1 || row.type === '1'" size="mini" type="success" icon="el-icon-video-play" @click="handleViewTutorial(row)">查看教程</el-button>
          </div>
        </template>
      </configurable-table>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      title="任务详情"
      :visible.sync="detailDialogVisible"
      width="700px"
      custom-class="view-dialog"
      :close-on-click-modal="false">
      <div class="detail-content" v-if="detailData">
        <!-- 基本信息卡片 -->
        <div class="detail-card basic-info-card">
          <div class="card-header">
            <i class="el-icon-document"></i>
            <span>基本信息</span>
          </div>
          <div class="card-body">
            <div class="detail-item">
              <div class="detail-label">
                <i class="el-icon-tickets"></i>
                <span>任务ID</span>
              </div>
              <div class="detail-value">{{ detailData.id || '无' }}</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">
                <i class="el-icon-edit-outline"></i>
                <span>任务标题</span>
              </div>
              <div class="detail-value title-value">{{ detailData.title || '无' }}</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">
                <i class="el-icon-document"></i>
                <span>任务描述</span>
              </div>
              <div class="detail-value description-value">{{ detailData.description || '无' }}</div>
            </div>
          </div>
        </div>

        <!-- 状态信息卡片 -->
        <div class="detail-card status-info-card">
          <div class="card-header">
            <i class="el-icon-info"></i>
            <span>状态信息</span>
          </div>
          <div class="card-body">
            <div class="detail-item">
              <div class="detail-label">
                <i class="el-icon-collection-tag"></i>
                <span>任务类型</span>
              </div>
              <div class="detail-value">
                <el-tag :type="getTypeTag(detailData.type)" size="medium">
                  {{ getTypeText(detailData.type) }}
                </el-tag>
              </div>
            </div>
            <div class="detail-item">
              <div class="detail-label">
                <i class="el-icon-time"></i>
                <span>任务状态</span>
              </div>
              <div class="detail-value">
                <el-tag :type="getStatusTag(detailData.status)" size="medium">
                  {{ getStatusText(detailData.status) }}
                </el-tag>
              </div>
            </div>
            <div class="detail-item">
              <div class="detail-label">
                <i class="el-icon-star-on"></i>
                <span>优先级</span>
              </div>
              <div class="detail-value">
                <el-tag :type="getPriorityTag(detailData.priority)" size="medium">
                  {{ getPriorityText(detailData.priority) }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 时间信息卡片 -->
        <div class="detail-card time-info-card">
          <div class="card-header">
            <i class="el-icon-date"></i>
            <span>时间信息</span>
          </div>
          <div class="card-body">
            <div class="detail-item">
              <div class="detail-label">
                <i class="el-icon-plus"></i>
                <span>创建时间</span>
              </div>
              <div class="detail-value time-value">{{ detailData.createTime || '无' }}</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">
                <i class="el-icon-alarm-clock"></i>
                <span>截止时间</span>
              </div>
              <div class="detail-value time-value deadline-value" :class="{ 'urgent': isDeadlineUrgent(detailData.deadline) }">
                {{ detailData.deadline || '无' }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false" size="medium">
          <i class="el-icon-close"></i>
          关闭
        </el-button>
      </div>
    </el-dialog>

    <!-- App使用教程对话框 -->
    <el-dialog
      title="App使用教程"
      :visible.sync="tutorialDialogVisible"
      width="90%"
      :close-on-click-modal="false"
      class="tutorial-dialog">

      <div class="tutorial-container">
        <!-- 教程导航 -->
        <div class="tutorial-nav">
          <el-steps :active="currentStep" finish-status="success" align-center>
            <el-step title="下载安装" description="下载并安装App"></el-step>
            <el-step title="注册登录" description="注册账号并登录"></el-step>
            <el-step title="基础功能" description="了解基础功能"></el-step>
            <el-step title="高级功能" description="掌握高级功能"></el-step>
            <el-step title="完成学习" description="完成教程学习"></el-step>
          </el-steps>
        </div>

        <!-- 教程内容 -->
        <div class="tutorial-content">
          <!-- 步骤1：下载安装 -->
          <div v-show="currentStep === 0" class="tutorial-step">
            <h3>📱 第一步：下载并安装App</h3>
            <div class="step-content">
              <div class="download-section">
                <h4>下载方式：</h4>
                <ul>
                  <li><strong>应用商店下载：</strong>在App Store或Google Play搜索"聚合支付"</li>
                  <li><strong>扫码下载：</strong>扫描下方二维码直接下载</li>
                  <li><strong>官网下载：</strong>访问官网 www.example.com 下载</li>
                </ul>

                <div class="qr-code-section">
                  <h4>扫码下载：</h4>
                  <div class="qr-code-placeholder">
                    <i class="el-icon-picture-outline"></i>
                    <p>二维码占位符</p>
                    <p>扫描此码下载App</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤2：注册登录 -->
          <div v-show="currentStep === 1" class="tutorial-step">
            <h3>🔐 第二步：注册账号并登录</h3>
            <div class="step-content">
              <div class="register-section">
                <h4>注册流程：</h4>
                <ol>
                  <li>打开App，点击"注册"按钮</li>
                  <li>输入手机号码，获取验证码</li>
                  <li>设置登录密码（6-20位字符）</li>
                  <li>阅读并同意用户协议</li>
                  <li>点击"完成注册"</li>
                </ol>

                <h4>登录方式：</h4>
                <ul>
                  <li><strong>手机号登录：</strong>输入手机号和密码</li>
                  <li><strong>验证码登录：</strong>输入手机号，获取验证码</li>
                  <li><strong>第三方登录：</strong>支持微信、支付宝登录</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 步骤3：基础功能 -->
          <div v-show="currentStep === 2" class="tutorial-step">
            <h3>⚡ 第三步：了解基础功能</h3>
            <div class="step-content">
              <div class="basic-functions">
                <div class="function-item">
                  <h4>🏠 首页功能</h4>
                  <ul>
                    <li>查看账户余额和积分</li>
                    <li>快速扫码支付</li>
                    <li>查看最近交易记录</li>
                    <li>获取最新优惠信息</li>
                  </ul>
                </div>

                <div class="function-item">
                  <h4>💳 支付功能</h4>
                  <ul>
                    <li>扫码支付：扫描商家二维码进行支付</li>
                    <li>收款功能：生成收款码供他人扫码支付</li>
                    <li>转账功能：向其他用户转账</li>
                    <li>充值提现：账户充值或提现到银行卡</li>
                  </ul>
                </div>

                <div class="function-item">
                  <h4>📊 账户管理</h4>
                  <ul>
                    <li>查看交易明细</li>
                    <li>管理银行卡</li>
                    <li>设置支付密码</li>
                    <li>修改个人信息</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤4：高级功能 -->
          <div v-show="currentStep === 3" class="tutorial-step">
            <h3>🚀 第四步：掌握高级功能</h3>
            <div class="step-content">
              <div class="advanced-functions">
                <div class="function-item">
                  <h4>🎯 商家功能</h4>
                  <ul>
                    <li>申请成为商家</li>
                    <li>管理商品信息</li>
                    <li>查看销售统计</li>
                    <li>设置收款码</li>
                  </ul>
                </div>

                <div class="function-item">
                  <h4>👥 代理功能</h4>
                  <ul>
                    <li>申请成为区域代理</li>
                    <li>管理下级商家</li>
                    <li>查看分佣收益</li>
                    <li>推广二维码</li>
                  </ul>
                </div>

                <div class="function-item">
                  <h4>📈 营销功能</h4>
                  <ul>
                    <li>参与优惠活动</li>
                    <li>邀请好友获得奖励</li>
                    <li>积分兑换商品</li>
                    <li>分享获得返利</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤5：完成学习 -->
          <div v-show="currentStep === 4" class="tutorial-step">
            <h3>🎉 第五步：完成教程学习</h3>
            <div class="step-content">
              <div class="completion-section">
                <div class="success-icon">
                  <i class="el-icon-success"></i>
                </div>
                <h4>恭喜您完成App使用教程！</h4>
                <p>现在您已经掌握了App的基本使用方法，可以开始享受便捷的支付服务了。</p>

                <div class="next-steps">
                  <h4>接下来您可以：</h4>
                  <ul>
                    <li>完善个人信息</li>
                    <li>绑定银行卡</li>
                    <li>设置支付密码</li>
                    <li>开始使用支付功能</li>
                    <li>邀请好友一起使用</li>
                  </ul>
                </div>

                <div class="help-section">
                  <h4>需要帮助？</h4>
                  <p>如果您在使用过程中遇到任何问题，可以：</p>
                  <ul>
                    <li>查看帮助中心</li>
                    <li>联系在线客服</li>
                    <li>拨打客服热线：400-123-4567</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 教程控制按钮 -->
        <div class="tutorial-controls">
          <el-button
            v-if="currentStep > 0"
            @click="prevStep"
            icon="el-icon-arrow-left">
            上一步
          </el-button>
          <el-button
            v-if="currentStep < 4"
            type="primary"
            @click="nextStep"
            icon="el-icon-arrow-right">
            下一步
          </el-button>
          <el-button
            v-if="currentStep === 4"
            type="success"
            @click="completeTutorial"
            icon="el-icon-check">
            完成学习
          </el-button>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="tutorialDialogVisible = false">关闭教程</el-button>
      </div>
    </el-dialog>

    <!-- 添加/编辑任务对话框 -->
    <el-dialog
      :title="isEdit ? '编辑任务' : '添加任务'"
      :visible.sync="addDialogVisible"
      width="680px"
      custom-class="action-dialog"
      :close-on-click-modal="false">

      <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" class="task-form">
        <!-- 基本信息分组 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-document"></i>
            <span>基本信息</span>
          </div>
          <el-form-item label="任务标题" prop="title">
            <el-input
              v-model="addForm.title"
              placeholder="请输入任务标题"
              clearable
              prefix-icon="el-icon-edit-outline">
            </el-input>
          </el-form-item>
          <el-form-item label="任务描述" prop="description">
            <el-input
              v-model="addForm.description"
              type="textarea"
              :rows="4"
              placeholder="请输入任务描述，详细描述任务内容和要求"
              maxlength="500"
              show-word-limit>
            </el-input>
          </el-form-item>
        </div>

        <!-- 配置信息分组 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-setting"></i>
            <span>配置信息</span>
          </div>
          <el-form-item label="任务类型" prop="type">
            <el-select
              v-model="addForm.type"
              placeholder="请选择任务类型"
              style="width: 100%"
              clearable>
              <el-option label="App教程" :value="1">
                <span style="float: left">App教程</span>
                <i class="el-icon-mobile-phone" style="float: right; color: #8492a6; font-size: 13px"></i>
              </el-option>
              <el-option label="系统培训" :value="2">
                <span style="float: left">系统培训</span>
                <i class="el-icon-monitor" style="float: right; color: #8492a6; font-size: 13px"></i>
              </el-option>
              <el-option label="业务指导" :value="3">
                <span style="float: left">业务指导</span>
                <i class="el-icon-document" style="float: right; color: #8492a6; font-size: 13px"></i>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任务状态" prop="status">
            <el-select
              v-model="addForm.status"
              placeholder="请选择任务状态"
              style="width: 100%"
              clearable>
              <el-option label="进行中" :value="1">
                <el-tag type="warning" size="small">进行中</el-tag>
              </el-option>
              <el-option label="已完成" :value="2">
                <el-tag type="success" size="small">已完成</el-tag>
              </el-option>
              <el-option label="已暂停" :value="3">
                <el-tag type="info" size="small">已暂停</el-tag>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="优先级" prop="priority">
            <el-select
              v-model="addForm.priority"
              placeholder="请选择优先级"
              style="width: 100%"
              clearable>
              <el-option label="低" :value="1">
                <el-tag size="small" style="background-color: #e4e7ed; color: #606266;">低</el-tag>
              </el-option>
              <el-option label="中" :value="2">
                <el-tag type="info" size="small">中</el-tag>
              </el-option>
              <el-option label="高" :value="3">
                <el-tag type="warning" size="small">高</el-tag>
              </el-option>
              <el-option label="紧急" :value="4">
                <el-tag type="danger" size="small">紧急</el-tag>
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <!-- 时间信息分组 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-time"></i>
            <span>时间信息</span>
          </div>
          <el-form-item label="截止时间" prop="deadline">
            <el-date-picker
              v-model="addForm.deadline"
              type="datetime"
              placeholder="选择截止时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
              prefix-icon="el-icon-date"
              :picker-options="{
                disabledDate(time) {
                  return time.getTime() < Date.now() - 8.64e7;
                }
              }">
            </el-date-picker>
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false" size="medium">
          <i class="el-icon-close"></i>
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleAddSubmit"
          :loading="addLoading"
          size="medium">
          <i :class="isEdit ? 'el-icon-check' : 'el-icon-plus'"></i>
          {{ isEdit ? '更新任务' : '添加任务' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'TaskManagement',
  data() {
    return {
      loading: false,
      searchForm: {
        status: null,
        type: null
      },
      // 原始数据（用于过滤）
      allTableData: [
        {
          id: 1,
          title: 'App使用教程',
          type: 1,
          status: 1,
          priority: 3,
          description: '为所有用户提供App使用教程，包括下载安装、注册登录、基础功能使用等',
          createTime: '2025-09-29 10:00:00',
          deadline: '2025-10-31 23:59:59'
        },
        {
          id: 2,
          title: '系统操作培训',
          type: 2,
          status: 2,
          priority: 2,
          description: '培训用户如何使用系统各项功能',
          createTime: '2025-09-28 09:00:00',
          deadline: '2025-09-30 18:00:00'
        },
        {
          id: 3,
          title: '业务指导手册',
          type: 3,
          status: 1,
          priority: 2,
          description: '提供业务操作指导文档',
          createTime: '2025-09-27 14:30:00',
          deadline: '2025-10-15 17:00:00'
        }
      ],
      // 显示的数据（过滤后的）
      tableData: [],
      // 表格列配置
      tableColumns: [
        { prop: 'id', label: '任务ID', minWidth: 80 },
        { prop: 'title', label: '任务标题', minWidth: 200, showOverflowTooltip: true },
        { prop: 'type', label: '任务类型', minWidth: 120, slot: 'type' },
        { prop: 'status', label: '任务状态', minWidth: 100, slot: 'status' },
        { prop: 'priority', label: '优先级', minWidth: 100, slot: 'priority' },
        { prop: 'createTime', label: '创建时间', minWidth: 180 },
        { prop: 'deadline', label: '截止时间', minWidth: 180 },
        { label: '操作', minWidth: 260, slot: 'actions' }
      ],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      // 详情对话框
      detailDialogVisible: false,
      detailData: null,
      // 教程对话框
      tutorialDialogVisible: false,
      currentStep: 0,
      // 添加/编辑对话框
      addDialogVisible: false,
      addLoading: false,
      isEdit: false,
      addForm: {
        id: null,
        title: '',
        type: null,
        status: 1,
        priority: 2,
        deadline: '',
        description: ''
      },
      addRules: {
        title: [
          { required: true, message: '请输入任务标题', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择任务类型', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择任务状态', trigger: 'change' }
        ],
        priority: [
          { required: true, message: '请选择优先级', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // 加载数据
    loadData() {
      this.loading = true

      // 模拟API调用
      setTimeout(() => {
        // 根据搜索条件过滤数据
        let filteredData = [...this.allTableData]

        // 按状态过滤
        if (this.searchForm.status !== null && this.searchForm.status !== '') {
          filteredData = filteredData.filter(item => item.status === this.searchForm.status)
        }

        // 按类型过滤
        if (this.searchForm.type !== null && this.searchForm.type !== '') {
          filteredData = filteredData.filter(item => item.type === this.searchForm.type)
        }

        // 更新显示数据和总数
        this.tableData = filteredData
        this.pagination.total = filteredData.length

        this.loading = false
      }, 500)
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadData()
    },

    // 重置
    handleReset() {
      this.searchForm = {
        status: null,
        type: null
      }
      this.handleSearch()
    },

    // 查看详情
    handleView(row) {
      this.detailData = row
      this.detailDialogVisible = true
    },

    // 编辑
    handleEdit(row) {
      this.isEdit = true
      this.addForm = { ...row }
      this.addDialogVisible = true
    },

    // 查看教程
    handleViewTutorial(row) {
      this.currentStep = 0
      this.tutorialDialogVisible = true
    },

    // 教程控制
    nextStep() {
      if (this.currentStep < 4) {
        this.currentStep++
      }
    },

    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },

    completeTutorial() {
      this.$message.success('恭喜您完成App使用教程！')
      this.tutorialDialogVisible = false
    },

    // 显示添加对话框
    showAddDialog() {
      this.isEdit = false
      this.addDialogVisible = true
      this.resetAddForm()
    },

    // 重置添加表单
    resetAddForm() {
      this.addForm = {
        id: null,
        title: '',
        type: null,
        status: 1,
        priority: 2,
        deadline: '',
        description: ''
      }
      if (this.$refs.addForm) {
        this.$refs.addForm.clearValidate()
      }
    },

    // 提交添加/编辑
    async handleAddSubmit() {
      try {
        await this.$refs.addForm.validate()
        this.addLoading = true

        // 模拟API调用
        setTimeout(() => {
          if (this.isEdit) {
            // 更新现有任务
            const index = this.allTableData.findIndex(item => item.id === this.addForm.id)
            if (index !== -1) {
              this.allTableData.splice(index, 1, { ...this.addForm })
            }
            this.$message.success('任务更新成功')
          } else {
            // 添加新任务
            const newTask = {
              ...this.addForm,
              id: this.allTableData.length + 1,
              createTime: new Date().toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
              }).replace(/\//g, '-')
            }
            this.allTableData.unshift(newTask)
            this.$message.success('任务添加成功')
          }

          // 重新加载数据以应用当前的过滤条件
          this.loadData()

          this.addDialogVisible = false
          this.addLoading = false
        }, 1000)
      } catch (error) {
        this.addLoading = false
      }
    },


    // 获取类型标签
    getTypeTag(type) {
      const typeMap = {
        1: 'success',  // App教程
        2: 'primary',  // 系统培训
        3: 'warning'   // 业务指导
      }
      return typeMap[type] || 'info'
    },

    // 获取类型文本
    getTypeText(type) {
      const typeMap = {
        1: 'App教程',
        2: '系统培训',
        3: '业务指导'
      }
      return typeMap[type] || '未知'
    },

    // 获取状态标签
    getStatusTag(status) {
      const statusMap = {
        1: 'warning',  // 进行中
        2: 'success',  // 已完成
        3: 'danger'    // 已暂停
      }
      return statusMap[status] || 'info'
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        1: '进行中',
        2: '已完成',
        3: '已暂停'
      }
      return statusMap[status] || '未知'
    },

    // 获取优先级标签
    getPriorityTag(priority) {
      const priorityMap = {
        1: 'info',     // 低
        2: 'primary',  // 中
        3: 'warning',  // 高
        4: 'danger'    // 紧急
      }
      return priorityMap[priority] || 'info'
    },

    // 获取优先级文本
    getPriorityText(priority) {
      const priorityMap = {
        1: '低',
        2: '中',
        3: '高',
        4: '紧急'
      }
      return priorityMap[priority] || '未知'
    },

    // 判断截止时间是否紧急（3天内）
    isDeadlineUrgent(deadline) {
      if (!deadline) return false
      const deadlineTime = new Date(deadline).getTime()
      const now = Date.now()
      const threeDays = 3 * 24 * 60 * 60 * 1000
      return deadlineTime - now > 0 && deadlineTime - now <= threeDays
    }
  }
}
</script>

<style scoped>
.task-management {
  padding: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.header-actions {
  float: right;
}

.add-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* ========== 详情对话框样式 - 已移至公共样式 ========== */
/* 详情内容布局 */
.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 教程对话框样式 */
.tutorial-dialog {
  .el-dialog {
    max-width: 1100px;
    border-radius: 16px;
    overflow: hidden;
  }

  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 24px 30px;
    margin: 0;
    border-bottom: none;
  }

  .el-dialog__title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;

    &::before {
      content: '📚';
      font-size: 24px;
    }
  }

  .el-dialog__headerbtn {
    .el-dialog__close {
      color: #ffffff;
      font-size: 24px;
      font-weight: 600;

      &:hover {
        color: #f0f0f0;
      }
    }
  }

  .el-dialog__body {
    padding: 0;
    background: #f5f7fa;
  }
}

.tutorial-container {
  padding: 32px;
}

.tutorial-nav {
  margin-bottom: 40px;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

  .el-steps {
    .el-step__head {
      .el-step__icon {
        width: 40px;
        height: 40px;
        border-width: 2px;
        font-size: 18px;
        font-weight: 600;
      }

      &.is-process .el-step__icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: #667eea;
        color: #ffffff;
      }

      &.is-success .el-step__icon {
        background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
        border-color: #67c23a;
        color: #ffffff;
      }

      &.is-finish .el-step__icon {
        border-color: #667eea;
      }
    }

    .el-step__title {
      font-size: 15px;
      font-weight: 600;
      color: #303133;
    }

    .el-step__description {
      font-size: 13px;
      color: #909399;
      margin-top: 4px;
    }
  }
}

.tutorial-content {
  min-height: 450px;
  padding: 32px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.tutorial-step {
  animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tutorial-step h3 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 28px;
  font-size: 26px;
  font-weight: 700;
  padding-bottom: 16px;
  border-bottom: 3px solid #e4e7ed;
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-content {
  line-height: 1.8;
  color: #606266;
}

.step-content h4 {
  color: #303133;
  margin: 24px 0 14px 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 4px solid #667eea;
}

.step-content ul, .step-content ol {
  margin: 12px 0;
  padding-left: 24px;
}

.step-content li {
  margin: 12px 0;
  color: #606266;
  line-height: 1.8;
  position: relative;

  &::marker {
    color: #667eea;
    font-weight: 600;
  }
}

.step-content strong {
  color: #303133;
  font-weight: 600;
}

.download-section, .register-section, .basic-functions, .advanced-functions, .completion-section {
  background: #ffffff;
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin: 20px 0;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
  }
}

.qr-code-section {
  text-align: center;
  margin: 30px 0;
  padding: 20px;
}

.qr-code-placeholder {
  display: inline-flex;
  width: 220px;
  height: 220px;
  border: 3px dashed #667eea;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    border-color: #764ba2;
    background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
    transform: scale(1.05);
  }

  i {
    font-size: 56px;
    margin-bottom: 12px;
    color: #667eea;
  }

  p {
    margin: 4px 0;
    font-size: 14px;
    font-weight: 500;

    &:first-of-type {
      font-size: 16px;
      font-weight: 600;
      color: #667eea;
    }
  }
}

.function-item {
  background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
  padding: 20px;
  border-radius: 10px;
  margin: 16px 0;
  border-left: 5px solid #667eea;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);

  &:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    border-left-color: #764ba2;
  }

  h4 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 17px;
    color: #303133;
    border-left: none;
    padding-left: 0;
  }

  ul {
    margin: 8px 0;
  }
}

.success-icon {
  text-align: center;
  margin: 30px 0;
  animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.success-icon i {
  font-size: 80px;
  color: #67c23a;
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.completion-section {
  text-align: center;

  h4 {
    justify-content: center;
    border-left: none;
    padding-left: 0;
    font-size: 24px;
    color: #67c23a;
    margin-top: 16px;
  }

  > p {
    font-size: 16px;
    color: #606266;
    margin: 16px 0 24px 0;
    line-height: 1.8;
  }
}

.next-steps, .help-section {
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
  padding: 20px;
  border-radius: 10px;
  margin: 20px 0;
  border-left: 4px solid #f56c6c;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.1);

  h4 {
    color: #f56c6c;
    border-left-color: #f56c6c;
    margin-top: 0;
  }

  p {
    color: #606266;
    margin-bottom: 12px;
  }
}

.next-steps {
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
  border-left-color: #409eff;

  h4 {
    color: #409eff;
    border-left-color: #409eff;
  }
}

.tutorial-controls {
  text-align: center;
  padding: 24px 0;
  border-top: 2px solid #e4e7ed;
  background: #ffffff;
  margin: 0 -32px -32px -32px;
  padding-left: 32px;
  padding-right: 32px;

  .el-button {
    margin: 0 12px;
    min-width: 120px;
    height: 42px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 0 24px;

    &.el-button--primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
      }
    }

    &.el-button--success {
      background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
      border: none;
      box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(103, 194, 58, 0.4);
      }
    }

    &:not(.el-button--primary):not(.el-button--success) {
      &:hover {
        border-color: #667eea;
        color: #667eea;
        transform: translateY(-2px);
      }
    }
  }
}

.tutorial-dialog .dialog-footer {
  background: #ffffff;
  padding: 16px 32px;
  border-top: 1px solid #e4e7ed;

  .el-button {
    min-width: 100px;
    height: 38px;
    border-radius: 8px;
    font-weight: 500;

    &:hover {
      border-color: #667eea;
      color: #667eea;
    }
  }
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  margin: 0;
  padding: 5px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.action-buttons .el-button + .el-button {
  margin-left: 0;
}

/* ========== 添加/编辑对话框样式 - 已移至公共样式 ========== */
/* 表单样式由公共样式 action-dialog 提供，此处保留任务特定的样式 */
</style>
